<template>
  <Header />
  <div class="main-container">
    <aside>
      <div class="sidebar">
        <ul v-for="(item, ii) in menuList" :key="item">
          <p class="title">{{ item.name }}</p>
          <li
            v-for="(ele, index) in item.list"
            :key="ele"
            :class="{ active: mIndex == ii + '-' + index }"
            @click="goPath(ele, ii, index)"
          >
            {{ ele.name }}
          </li>
        </ul>
      </div>
    </aside>
    <main class="app-main">
      <router-view></router-view>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import Header from "@/components/header.vue";
import { menuList } from "@/router/router.config";

const router = useRouter();
const mIndex = ref(sessionStorage.getItem("mIndex") || "0");

const goPath = (ele, ii, index) => {
  mIndex.value = ii + "-" + index;
  router.push({
    path: ele.path,
  });
  sessionStorage.setItem("mIndex", mIndex.value);
};
</script>

<style lang="less" scoped>
.main-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 60px);
  overflow: hidden;
  position: fixed;
  top: 60px;
  aside {
    height: 100%;
    border-right: 1px solid #eee;
    overflow-y: auto;
    .sidebar {
      width: 200px;
      height: auto;
      box-sizing: border-box;
      .title {
        font-weight: 700;
        margin: 10px;
        line-height: 24px;
        margin-left: 40px;
        padding-bottom: 5px;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
      }
      ul {
        li {
          height: 50px;
          line-height: 50px;
          padding-left: 40px;
          font-size: 13px;
          color: #606266;
          cursor: pointer;
        }
        .active {
          color: #409eff;
          background-color: #ecf5ff;
        }
      }
    }
  }
  .app-main {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #f0f2f5;
    overflow: auto;
  }
}
</style>
